<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>"Digitalis - Business and Portfolio HTML Template" Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
</head>


<body>
	<div class="container">
	
		<h3 class="center alt top">&ldquo;Digitalis HTML Template&rdquo; Documentation by Ruven Pelka v1.2</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Digitalis - Business and Portfolio HTML Template&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: January 6, 2011<br/>
					By: Ruven Pelka
					</strong>
				</p>
				<p class="prepend-top small">
				  Informations about updates and new templates are always announced on Twitter and Facebook.
				</p>
				<p class="prepend-top">
  				<a href="http://twitter.com/rpelka">
  				  <img src="assets/images/twitter.png" alt="Follow Ruven Pelka on Twitter" width="230" height="59">
  				</a>
  				<br/>
  				<a href="http://www.facebook.com/pages/Ruven/115129975163761">
  				  <img src="assets/images/facebook.png" alt="Add Ruven Pelka on Facebook" width="230" height="59">
  				</a>
        </p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">
				  Thank you for purchasing my template!
				</p>
				<p>
				  This documentation will teach you how to use the Digitalis HTML template for your own needs.
				  I provide pretty extensive help in this file, but this doesn’t mean the template is hard to use.
				  I just want to cover every question that might occur.
				</p>
				<p>
          This template is build on a rock solid and organized CSS/XHTML foundation.
          You shouldn‘t have trouble to browse or edit the code, if you are familiar with the basics.
				</p>
				<p>
				  Have fun with your new template! Best regards,
    		  <br/>
    		  <span class="alt large">Ruven Pelka</span>
				</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		
		
		
		
		
		
		
		
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#folderStructure">Folder Structure</a></li>
			<li><a href="#css">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript and jQuery</a></li>
			<li><a href="#pictureSizes">Picture Sizes</a></li>
			<li><a href="#firstSteps">First Steps to make Layout Adjustments and Add Content</a></li>
			<li><a href="#customElements">Custom Elements</a></li>
			<li><a href="#flashVideos">Flash-Videos</a></li>
			<li><a href="#moreCodeExamples">More Code Examples</a></li>
			<li><a href="#photoshop">Photoshop Files</a></li>
			<li><a href="#support">Support</a></li>
			<li><a href="#sources">Sources and Credits</a></li>
		</ol>
		
		<hr>
		
		
		
		
		
		
		
		
		
		
		<h3 id="folderStructure"><strong>A) Folder Structure</strong> - <a href="#toc">top</a></h3>
		
		<ul>
		  <li><strong>images</strong> → contains placeholder pictures for demonstration purpose
		    <ul>
		      <li><strong>dummy</strong> → contains placeholder pictures for demonstration purpose</li>
		      <li><strong>layout</strong> → contains all layout images
		        <ul>
        		  <li><strong>dark</strong> → contains a folder for every color that is available for the dark layout style with its specific image files</li>
        		  <li><strong>default</strong> → contains a folder for every color that is available for the default layout style with its specific image files</li>
        		  <li><strong>shared</strong> → contains images that are shared between all layout styles</li>
		        </ul>
		      </li>
		      <li><strong>shared</strong> → containts images that are shared between different pages</li>
		    </ul>
		  </li>
		  <li><strong>javascripts</strong> → contains the jQuery Framework, Cufon files and jQuery plugins</li>
		  <li><strong>plugins</strong> → contains additional jQuery plugins that are including files of different document types</li>
		  <li><strong>stylesheets</strong> → containts the main CSS file layout.css and one folder for every layout style
		    <ul>
		      <li><strong>dark</strong> → contains a CSS file for every color that is available for the dark layout style</li>
		      <li><strong>default</strong> → contains a CSS file for every color that is available for the default layout style and the shared.css file with color informations that are getting shared between these files</li>
		    </ul>
		  </li>
		</ul>
		
		
		
		
		
		
		
		
		
		
		<h3 id="css"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
		<h4 id="cssCodeStructure">Code Structure</h4>
		<p>      The CSS structure is pretty simple. 
      In every CSS file you will find headlines that tell you what the following code is about.
      <br/><br/>      <strong>Technical Note:</strong>
      In front of every headline is the word <i>@group</i>.
      This is a special tag, that is used by some CSS-Editors in order to let you navigate through your code faster by the use of a tree view where every group gets displayed as a folder.
    </p>    <h4 id="cssFileStructure">File Structure</h4>
    <p>      The main CSS file of the template is the <i>layout.css</i>, where all the all styles, except the colors, are included.
      <br/>      The template has two different layouts. The <i>default</i>, which leaves the main section (between the header and footer section) white and only adds color to the header and the footer section and the <i>dark</i> layout, that covers the whole page (including the main content section) in dark color.
      <br/>      You will find the the colors files for each layout inside the folder <i>stylesheets</i>.
      <br/>      The <i>default</i> layout includes the <i>shared.css</i> file, that contains the code for the never changing main content section, in each color CSS file.
      <br/>      The color files for the <i>dark</i> layout contains the color styles for the whole page and don’t include a third CSS file.
		</p>
		
		
		
		
		
		
		
		
		
		
		<h3 id="javascript"><strong>C) JavaScript and jQuery</strong> - <a href="#toc">top</a></h3>
		<p>
  		This template makes use of the jQuery JavaScript Framework and contains plugins that are written with the frameworks syntax. Further the template is using the font replacement engine Cufon.    </p>
    <p>      All JavaScript files are included in the head of the template files.
      <br/>      Most of the JavaScript files can be found in the <i>javascript</i> folder. The files of plugins that require more than just a JavaScript file are located in the <i>plugins</i> folder.
		</p>
		
		<h4 id="javascriptPluginSettings">Plugin Settings and Custom JavaScript</h4>
		<p>
		  To change the settings of a plugin (e.g. you want to change the transition effects of the slider), simply edit the <i>custom.js</i> file inside the <i>javascript</i> folder.
		  Here you will find all the code that configures and invokes the plugins.
		</p>
		
		
		
		
		
		
		
		
		
		
		<h3 id="pictureSizes"><strong>D) Picture Sizes</strong> - <a href="#toc">top</a></h3>
		<p>
  		You should use the following picture sizes for certain areas of the template:    </p>
    <table summary="Picture Sizes">
      <colgroup>
        <col width="30%">
        <col width="17%">
        <col width="*">
      </colgroup>
      <thead>
        <tr>
          <th>Type</th>
          <th>Width (in pixels)</th>
          <th>Height (in pixels)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Frontpage</td>
          <td>940</td>
          <td>420</td>
        </tr>
        <tr>
          <td>Fullscreen</td>
          <td>940</td>
          <td>* (various)</td>
        </tr>
        <tr>
          <td>Two Third (with Sidebar)</td>
          <td>610</td>
          <td>* (various)</td>
        </tr>
        <tr>
          <td>Half (2-column Portfolio)</td>
          <td>445</td>
          <td>* (various)</td>
        </tr>
        <tr>
          <td>One Third (3-column Portfolio / features on frontpage)</td>
          <td>280</td>
          <td>* (various)</td>
        </tr>
        <tr>
          <td>Image inside Sidebar Box</td>
          <td>248</td>
          <td>* (various)</td>
        </tr>
      </tbody>
    </table>
		
		
		
		
		
		
		
		
		
		
		<h3 id="firstSteps"><strong>E) First Steps to make Layout Adjustments and Add Content</strong> - <a href="#toc">top</a></h3>
    <p>
      Before and/or after putting your own content in the template, please make sure you followed these steps:
    </p>
    
    <h4 id="firstStepsLittleThings">The Little Things</h4>
    <ul>
      <li>Change the H1 heading to your page or company name.</li>      <li>Change the title of your pages.</li>      <li>Add a Meta-Description to your pages.</li>      <li>Add your own navigation links.</li>      <li>Add your own slogan to the Top Bar or delete the whole thing, if you don’t need it.</li>      <li>Put links (.nav) and content (.content) into the Sidebar.</li>      <li>Edit the Breadcrumbs and Social Links in the Bottom Bar or delete the whole thing, if you don’t need it.</li>      <li>Edit the Footer. <strong>Note:</strong> You might want to activate or delete the Footerbar, which is hidden by default (more about this in the section Layout Options).</li>
    </ul>
    
    <h4 id="firstStepsChangeLayout">Change the Layout Style and Color</h4>
    <p>
      In order to change the color of a page, you just have to change the path and/or name of the color CSS file:
    </p>
    <pre>&lt;!-- Stylesheets: Screen, Projection --&gt;&lt;link href="stylesheets/layout.css" media="screen, projection" rel="stylesheet" type="text/css"&gt;&lt;link href="stylesheets/<span class="highlight">default/black.css</span>" media="screen, projection" rel="stylesheet" type="text/css"&gt;</pre>
    <p>
      <strong>Note:</strong> The color CSS file needs to be included below the <i>layout.css</i> file.
    </p>
		<p>
		  There are two kinds of layouts. The default (lighter) and the dark (full-color) layout. Each layout has it’s own colors. Here is an overview:
		</p>
		<ul>
		  <li><strong>default</strong>
		    <ul>
		      <li>black</li>
		      <li>white</li>
		      <li>grey</li>
		      <li>blue</li>
		      <li>red</li>
		      <li>green</li>
		    </ul>
		  </li>
		  <li><strong>dark</strong>
		    <ul>
		      <li>black</li>
		      <li>grey</li>
		    </ul>
		  </li>
		</ul>
		<pre>&lt;link href="stylesheets/<span class="highlight">&lt;&lt;LAYOUT&gt;&gt;</span>/<span class="highlight">&lt;&lt;COLOR&gt;&gt;</span>.css" media="screen, projection" rel="stylesheet" type="text/css"&gt;</pre>
		
		<h4 id="firstStepsChangeLogo">Change the Logo</h4>
		<p>
		  To change the logo, just overwrite the logo.png file inside the directory <i>images/layout/&lt;&lt;YOUR LAYOUT&gt;&gt;/&lt;&lt;YOUR COLOR&gt;&gt;/</i>.
		  <br/>      If your logo is too long and gets cut off on the right side, you can change the width of the logo space in the <i>layout.css</i> file under the Headings <i>Layout Structure &gt; Header &gt; “#header #logo h1 a”</i>.
		</p>
		
		<h4 id="firstStepsAdjustSliders">Slider Settings</h4>
		<p>
		  Digitalis supports a frontpage Slider and also inline Sliders.
		  You can set certain options for every group of slider.
		  Just open the file <i>javascripts/custom.js</i> and scroll to the headline <i>Nivo Slider</i>.
		  Here you can set Transition Effect, Animation Speed (<i>animSpeed</i>) and Pause Time (<i>pauseTime</i>) for every slider group.
		  Please note that Animation Speed and Pause Time need to be adjusted in milliseconds (3000 milliseconds = 3 seconds and 500 milliseconds = 0.5 seconds).
		</p>
		<p>
		  Here are the effects you can insert:
		</p>
		<ul>
		  <li>sliceDown</li>
      <li>sliceDownLeft</li>
      <li>sliceUp</li>
      <li>sliceUpLeft</li>
      <li>sliceUpDown</li>
      <li>sliceUpDownLeft</li>
      <li>fold</li>
      <li>fade</li>
      <li>random</li>
		</ul>
		<p>
		  To learn more about the options visit the Nivo Slider creators website: <a href="http://nivo.dev7studios.com/#usage">http://nivo.dev7studios.com/</a>.
		</p>
		
		<h4 id="firstStepsReceiveEmails">Receive E-Mails from the Contact Form</h4>
		<p>
  		This template includes a working AJAX-Contact-Form. In order to receive E-Mails that get sent from this form, you need to host the template on a server with PHP 5 and mail support (99% of all hosters should cover these requirements).      <br/>All you have to do then, is to open the file <i>contactform_mailer.php</i> and change the value of the receiver variable to your own E-Mail-Address:
    </p>
    <pre>$receiver = "youraddy@example.com";</pre>    <p>      In this file you can also change the output-notifications of the mailer-script.
    </p>
		
		<h4 id="firstStepsLayoutOptions">Layout Options</h4>
		<p>
  		You can control how the layout should look by adding certain classes to the body element, like this:
		</p>
		<pre>&lt;body class="sidebar-left no-topbar no-nav-bg"&gt;</pre>
		<p>      This example would render the page with the sidebar on the left instead on the right side, without a top bar (in which you can put a slogan) and without a background for the navigation menu.
    </p>
    <p>      Here is an overview of all the classes you can include:
    </p>
    <table summary="Layout Options">
      <colgroup>
        <col width="20%">
        <col width="*">
      </colgroup>
      <thead>
        <tr>
          <th>Class</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>preview</td>
          <td>Makes room for a big slideshow (e.g. on the Frontpage).</td>
        </tr>
        <tr>
          <td>fullwidth</td>
          <td>Makes room for content in fullwidth of the page and hides the Sidebar.</td>
        </tr>
        <tr>
          <td>boxed</td>
          <td>Instead of a stretched layout, the page will have a restricted width of 1040 pixel and will apper in a “box”. But don’t worry, if a user has a smaller screen resolution the page automatically jumps back to the stretched layout an the width will only be 940 pixel.</td>
        </tr>
        <tr>
          <td>no-topbar</td>
          <td>
            Hides the the Top Bar in which you can put a slogan.            <br/><strong>Note:</strong> You can also just delete div#topbar to get rid of it.
          </td>
        </tr>
        <tr>
          <td>sidebar-left</td>
          <td>Puts the Sidebar on the left instead of the right side.</td>
        </tr>
        <tr>
          <td>no-nav-bg</td>
          <td>Hides the navigation background box and makes the navigation look more minimalistic.</td>
        </tr>
        <tr>
          <td>no-boxed-sidebar</td>
          <td>The sidebar content and navigation boxes won’t appear in a box anymore. This makes the page look more minimalistic.</td>
        </tr>
        <tr>
          <td>minimal</td>
          <td>Lets the page appear more minimalistic and 2-Dimensional. Some details will disappear. </td>
        </tr>
        <tr>
          <td>no-header-gradient</td>
          <td>Hides the header background image and shows only one color instead of a gradient.</td>
        </tr>
        <tr>
          <td>no-footer-gradient</td>
          <td>Hides the footer background image and shows only one color instead of a gradient.</td>
        </tr>
        <tr>
          <td>no-rounded-corners</td>
          <td>Makes the rounded corners disappear.</td>
        </tr>
        <tr>
          <td>no-sliding-links</td>
          <td>Disables the sliding effect of the sidebar and footer navigation links</td>
        </tr>
        <tr>
          <td>show-bottombar</td>
          <td>
            Shows the Bottom Bar, which is hidden by default, over the Footer.             <br/><strong>Note:</strong> The code for the Bottom Bar is in the HTML-Markup by default, but the Bottom Bar is hidden. If you don’t want it at all just delete div#bottombar.
          </td>
        </tr>
        <tr>
          <td>no-footer</td>
          <td>
            Hides the Footer.            <br/><strong>Note:</strong> You can also just delete div#footer to get rid of it.
          </td>
        </tr>
        <tr>
          <td>show-footerbar</td>
          <td>
            Shows the Footer Bar, which is hidden by default, under the Footer.            <br/><strong>Note:</strong> The code for the Footer Bar is in the HTML-Markup by default, but the Footer Bar is hidden. If you don’t want it at all just delete div#footerbar.
          </td>
        </tr>
        <tr>
          <td>footerbar-inline</td>
          <td>The line over the Footer Bar is fullwidth by default. This class makes the line be only as wide as the content of the Footer Bar is.</td>
        </tr>
      </tbody>
    </table>
		
		
		
		
		
		
		
		
		
		
		<h3 id="customElements"><strong>F) Custom Elements</strong> - <a href="#toc">top</a></h3>
		<p>
		  In this section I describe how to use custom elements.
		</p>
		
		
		
		<div class="box">
  		<h4 id="customElementsDividers">Dividers and Spacers</h4>
  		<p>
  		  <strong>Note:</strong> All Dividers and Spacers will clear floats on both sides.
  		</p>
  		
  		<hr class="space" />
  		<h5>divider</h5>
  		<p>
  		  Clears floats on both sides. You should always use it, when you work with columns.
  		</p>
  		<pre>&lt;div class=”divider”&gt;&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>hr</h5>
  		<p>
  		  Creates a horizontal ruler (hr).
  		</p>
  		<pre>&lt;div class=”hr”&gt;&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>spacer</h5>
  		<p>
  		  Creates a 15 pixel spacer between two elements.
  		</p>
  		<pre>&lt;div class=”spacer”&gt;&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>big-spacer</h5>
  		<p>
  		  Creates a 35 pixel spacer between two elements.  		</p>
  		<pre>&lt;div class=”big-spacer”&gt;&lt;/div&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsFloats">Floats</h4>
      
  		<hr class="space" />
  		<h5>float-left</h5>
  		<p>
  		  Lets an element float on the left side.
  		</p>
  		<pre>&lt;img src="picture.jpg" class=”float-left” /&gt;</pre>
  		
  		<hr class="space" />
  		<h5>float-right</h5>
  		<p>
  		  Lets an element float on the right side.
  		</p>
  		<pre>&lt;img src="picture.jpg" class=”float-right” /&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsUnderlinedHeadings">Underlined Headings</h4>
  		<p>
  		  To underline a heading, add the class <i>underline</i> to it or wrap many headings inside and element assigned with the class <i>underline-headings</i>.
  		</p>
  		<pre>&lt;h3 class=”underline”&gt;Single underlined heading&lt;/h3&gt;</pre>
  		<pre>&lt;div class=”underline-headings”&gt;
  &lt;h3&gt;Underlined heading 1&lt;/h3&gt;
  &lt;p&gt;Some text...&lt;/p&gt;
  &lt;h3&gt;Underlined heading 2&lt;/h3&gt;
  &lt;p&gt;Some more text...&lt;/p&gt;
&lt;/div&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsHightlightText">Hightlight Text</h4>
  		<p>        Highlight text to make it stand out.
  		</p>
  		<pre>&lt;p&gt;Lorem &lt;span class="highlight"&gt;ipsum&lt;/span&gt; dolor
sit &lt;span class="highlight-2"&gt;amet&lt;/span&gt; elit.&lt;/p&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsFrames">Frames and Image Captions</h4>
  		
  		<hr class="space" />
  		<h5>content-frame</h5>
  		<p>
  		  Creates a frame around your content elements.
  		</p>
  		<pre>&lt;div class="content-frame&gt;Content here&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>frame</h5>
  		<p>
  		  Creates a small frame around your content.
  		</p>
  		<pre>&lt;div class="frame&gt;Content here&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>img-frame</h5>
  		<p>
  		  Create a frame around an image element.
  		</p>
  		<pre>&lt;div class="img-frame"&gt;&lt;img src="picture.jpg" /&gt;&lt;/div&gt;</pre>
  		
  		<hr class="space" />
  		<h5>img-with-caption</h5>
  		<p>
  		  Lets you put a caption under an image.
  		</p>
  		<pre>&lt;div class="img-with-caption"&gt;
  &lt;img src="picture.jpg" /&gt;
  &lt;p class="caption"&gt;Image with caption&lt;/p&gt;
&lt;/div&gt;</pre>

  		<hr class="space" />
      <p>
        You can even combine frames and captions, like in this example:
      </p>
      <pre>&lt;div class="<span class="highlight">img-frame img-with-caption</span>"&gt;
  &lt;img src="picture.jpg" /&gt;
  &lt;p class="caption"&gt;Image-Frame with caption&lt;/p&gt;
&lt;/div&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsDataTables">Data Tables</h4>
  		<p>
  		  Use the class <i>data</i> on a table to let it look good. Use the class <i>alt</i> on a table row or on a table data field to highlight it.
  		</p>
  		<pre>&lt;table class=”data”&gt;
  ...
&lt;/table&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsDropcaps">Dropcaps</h4>
  		
  		<hr class="space" />
  		<h5>Default</h5>
  		<pre>&lt;p&gt;&lt;span class="dropcap"&gt;H&lt;/span&gt;ello&lt;/p&gt;</pre>
  		
  		<hr class="space" />
  		<h5>Square</h5>
  		<pre>&lt;p&gt;&lt;span class="dropcap-square"&gt;H&lt;/span&gt;ello&lt;/p&gt;</pre>
  		
  		<hr class="space" />
  		<h5>Circle</h5>
  		<pre>&lt;p&gt;&lt;span class="dropcap-circle"&gt;H&lt;/span&gt;ello&lt;/p&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsBlockquotes">Blockquotes</h4>
  		
  		<hr class="space" />
  		<h5>Default</h5>
  		<pre>&lt;blockquote&gt;
  &lt;p&gt;Some Text&lt;/p&gt;
&lt;/blockquote&gt;</pre>
  		
  		<hr class="space" />
  		<h5>With Author</h5>
  		<pre>&lt;blockquote&gt;
  &lt;p&gt;Some Text&lt;/p&gt;
  &lt;p class="author"&gt;&mdash; &lt;b&gt;Ruven Pelka&lt;/b&gt;&lt;/p&gt;
&lt;/blockquote&gt;</pre>
  		
  		<hr class="space" />
  		<h5>Floats</h5>
  		<p>
  		  To get Blockquotes floatet on a specific side, use the classes <i>float-left</i> and <i>float-right</i>.
  		</p>
  		<pre>&lt;blockquote class="float-left"&gt;
  &lt;p&gt;Some Text&lt;/p&gt;
&lt;/blockquote&gt;</pre>

		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsPaginator">Paginator</h4>
  		<p>
  		  Use the class <i>paginator</i> to style links as page navigator.
  		</p>
  		<pre>&lt;div class="paginator"&gt;
  &lt;a href="page1.html" class="first"&gt;« Prev&lt;/a&gt;
  &lt;span class="active"&gt;1&lt;/span&gt;
  &lt;a href="page2.html"&gt;2&lt;/a&gt;
  &lt;a href="page3.html"&gt;3&lt;/a&gt;
  &lt;a href="page4.html"&gt;4&lt;/a&gt;
  &lt;a href="page5.html"&gt;5&lt;/a&gt;
  &lt;a href="page2.html" class="last"&gt;Next »&lt;/a&gt;
&lt;/div&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsLightbox">Lightbox</h4>
  		<p>
  		  To let a linked image or Flash-Video appear in a Lightbox, add the attribut <i>rel=”lightbox”</i> to the anker element.
  		</p>
  		<pre>&lt;a rel='lightbox' href="big_picture.jpg"&gt;
  &lt;img src="picture.jpg" /&gt;
&lt;/a&gt;</pre>

      <p>
        In order to let the user browse through many images inside the Lightbox, assign a sub-attribute to the rel attributes value.
      </p>
      <pre>&lt;a rel="lightbox[group]" href="big_picture1.jpg"&gt;&lt;img src="picture1.jpg" /&gt;&lt;/a&gt;
&lt;a rel="lightbox[group]" href="big_picture2.jpg"&gt;&lt;img src="picture2.jpg" /&gt;&lt;/a&gt;
&lt;a rel="lightbox[group]" href="big_picture3.jpg"&gt;&lt;img src="picture3.jpg" /&gt;&lt;/a&gt;</pre>
  		
  		<p>
  		  This template contains two different Lightbox plugins.
  		  <i>Fancybox</i>, which is visually more appealing, and <i>prettyPhoto</i>, which has more features (e.g. playing of Flash-Video).        The default Lightbox plugin is <i>prettyPhoto</i>.
        <br/>        However, if you want to activate <i>Fancybox</i>, all you have to do is to go into the head of the HTML file and <b>delete</b> the following code:
  		</p>
  		<pre>&lt;!-- prettyPhoto --&gt;
&lt;link href="plugins/prettyPhoto/css/prettyPhoto.css" media="screen, projection" rel="stylesheet" type="text/css" /&gt;
&lt;script src="plugins/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"&gt;&lt;/script&gt;</pre>

      <p>
        Then uncomment (delete “&lt;!--” and “--&gt;”) the following code, that you will find right below, to activate <i>Fancybox</i>:
      </p>
      <pre>&lt;!-- Fancybox --&gt;
&lt;!--
&lt;link href="plugins/fancybox/jquery.fancybox-1.3.1.css" media="screen, projection" rel="stylesheet" type="text/css" /&gt;
&lt;script src="plugins/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"&gt;&lt;/script&gt;
--&gt;</pre>
    
    <p>
      To configure either one of these plugins, please edit the custom.js file in the <i>javascripts</i> folder.
    </p>
      
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsGallery">Gallery</h4>
  		<p>
  		  Use the class <i>gallery</i> to style a list of images.
  		</p>
  		<pre>&lt;ul class="gallery"&gt;
  &lt;li&gt;&lt;a rel='lightbox[gallery]' href="big_picture.jpg"&gt;&lt;img src="picture.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a rel='lightbox[gallery]' href="big_picture.jpg"&gt;&lt;img src="picture.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a rel='lightbox[gallery]' href="big_picture.jpg"&gt;&lt;img src="picture.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a rel='lightbox[gallery]' href="big_picture.jpg"&gt;&lt;img src="picture.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsToggler">Toggler</h4>
  		<p>
  		  Shows and hides content with one click. This works well for FAQ pages.
  		</p>
  		<pre>&lt;div class="toggler"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/div&gt;
&lt;div class="toggle-content"&gt;
  &lt;p&gt;Content...&lt;/p&gt;
&lt;/div&gt;</pre>
      <p>
        <strong>Note</strong>: Make sure the title is wrapped in <i>&lt;strong&gt;</i> tags.
      </p>
      <p>
        If you want the toggler to close all other open togglers on the page, when you click on the title, use the class <i>close-all</i>. 
      </p>
      <pre>&lt;div class="toggler close-all"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/div&gt;
...</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsSliders">Sliders</h4>
  		<p>
  		  Make Image-Slideshows that can be played automatically or manually.
  		</p>
  		
  		<hr class="space" />
  		<h5>Manually</h5>
  		<pre>&lt;div class="slider"&gt;
  &lt;img src="picture1.jpg" /&gt;
  &lt;img src="picture2.jpg" /&gt;
&lt;/div&gt; </pre>
  		
  		<hr class="space" />
  		<h5>Automatic</h5>
  		<pre>&lt;div class="slider automatic"&gt;
  &lt;img src="picture1.jpg" /&gt;
  &lt;img src="picture2.jpg" /&gt;
&lt;/div&gt; </pre>
  		
  		<hr class="space" />
  		<h5>Manually with Navigation Arrows</h5>
  		<pre>&lt;div class="slider show-nav-arrows"&gt;
  &lt;img src="picture1.jpg" /&gt;
  &lt;img src="picture2.jpg" /&gt;
&lt;/div&gt; </pre>
  		
  		<hr class="space" />
  		<h5>Adding Captions</h5>
  		<p>
  		  To add a text caption to a slider image, just add the <i>title</i> attribute to the <i>img</i> element.
  		  <br/>
  		  To add a HTML caption, create a <i>div</i> with the class <i>nivo-html-caption</i> under the slider div and assign it with an ID.
  		  Then write the ID, prefixed with an <i>#</i>, in the title attribute of the image you want to assign the caption to.
  		</p>
  		<pre>&lt;div class="slider"&gt;
  &lt;img src="picture1.jpg" title="A text normal caption" /&gt;
  &lt;img src="picture2.jpg" <span class="highlight">title="#html-caption"</span>/&gt;
&lt;/div&gt;
&lt;div <span class="highlight">id="html-caption"</span> class="nivo-html-caption"&gt; 
  &lt;strong&gt;This&lt;/strong&gt; is an example of a &lt;em&gt;HTML&lt;/em&gt; caption with &lt;a href="#"&gt;a link&lt;/a&gt;
&lt;/div&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsCustomLists">Custom Lists</h4>
  		<p>
  		  You can create different kinds of lists, just by adding certain classes to the element.
  		</p>
  		
  		<hr class="space" />
  		<h5>Check List</h5>
  		<pre>&lt;ul class="check"&gt;
  &lt;li&gt;List element&lt;/li&gt;
&lt;/ul&gt;</pre>
  		
  		<hr class="space" />
  		<h5>Cross List</h5>
  		<pre>&lt;ul class="cross"&gt;
  &lt;li&gt;List element&lt;/li&gt;
&lt;/ul&gt;</pre>
  		
  		<hr class="space" />
  		<h5>Mixed List</h5>
  		<pre>&lt;ul class="mixed"&gt;
  &lt;li class="check"&gt;Checked list element&lt;/li&gt;
  &lt;li class="cross"&gt;Crossed list element&lt;/li&gt;
  &lt;li class="check"&gt;Checked list element&lt;/li&gt;
&lt;/ul&gt;</pre>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsColumns">Columns</h4>
  		<p>
  		  Use columns to place elements side by side. You can specify the width of a column by the class name.
  		</p>
  		<pre>&lt;p class=”one-third”&gt;Some Text&lt;/p&gt;
&lt;p class=”two-third last”&gt;Some Text&lt;/p&gt;
&lt;div class=”divider”&gt;&lt;/div&gt;</pre>
      <p>
        <strong>Note:</strong> Make sure to add the class last to the last column and to put a divider below to clear the floats of the columns.
      </p>
      
      <p>The following column class names are available:</p>
  		<ul>
  		  <li>one-half</li>        <li>one-third</li>        <li>one-fourth</li>        <li>two-third</li>        <li>three-fourth</li>
  		</ul>
  		
  		<p>
  		  You can use columns inside <i>content-frame</i> and <i>frame</i> and to position form elements.
  		  In a <i>fullwidth</i> page you can also add the class <i>wide-columns</i> to a wrapping element to make the column width bigger and the space between them smaller.
  		</p>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsRoundedImages">Rounded Images</h4>
  		<p>
  		  To make an image appear with rounded corners, add the class rounded to the image element.
  		</p>
  		<pre>&lt;img src="picture.jpg" class=”rounded” /&gt;</pre>
  		<p>
  		  <strong>Note:</strong> Some older Browsers may not support rounded corners (e.g. Internet Explorer < Version 9)
  		</p>
  		<p>
  		  <strong>Technical Note:</strong> In order to use advanced CSS techniques and to minimize difficulties with certain Browsers, images with the class rounded will be rendered as background images.
  		</p>
		</div>
		
		
		
		<div class="box">
  		<h4 id="customElementsRoundedBox">Rounded Box</h4>
  		<p>
  		  Certain objects (e.g. Sliders) that can’t be rounded with the simple adding of a class, need to be wrapped in a <i>&lt;div&gt;</i> with the class <i>rounded-box</i>.
  		</p>
  		<pre>&lt;div class="rounded-box"&gt;
  &lt;div class="slider automatic"&gt;
    &lt;img src="picture.jpg" /&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		</div>
		
		
		
		
		
		
		
		
		
		
		<h3 id="flashVideos"><strong>G) Flash-Videos</strong> - <a href="#toc">top</a></h3>
		<p>
		  There are two ways to include Flash-Videos. Either you link it with the help of a Lightbox to play it, or you embed it directly into the page.
		</p>
		
		<h4 id="flashVideosLightbox">Lightbox</h4>
		<p>
  		<strong>Note:</strong> Only the default Lightbox plugin <i>prettyPhoto</i> supports Flash-Videos.
  		If you changed your Lightbox to <i>Fancybox</i> you will not be able to play Flash-Videos.
  	</p>    <p>      All what <i>prettyPhoto</i> needs, in order to play the video, is the URL.
      If you want to link to a YouTube-Video, just go to the video of your choice, click below on <i>Share</i> and copy the URL into your anker element.
    </p>
    <pre>&lt;a rel="lightbox" href="http://www.youtube.com/watch?v=5L1wHSl_h8w"&gt;
  &lt;img src="picture.jpg" class="rounded" /&gt;
&lt;/a&gt;</pre>
    <p>
      It works the same way with videos from the website <a href="http://www.vimeo.com/">vimeo.com</a>.
    </p>
    
    <h4 id="flashVideosEmbedding">Embedding</h4>
    <p>
      To embed a Video from YouTube or Vimeo just go to the video page, click the <i>share</i> button, make some adjustments (e.g. 610 pixel width on pages with a sidebar or 940 pixel width on fullwidth pages), copy the source code and include it into your page.
      <br/>      If you want the corners of the video to be rounded, just add the class <i>rounded</i> to the object or <i>iframe</i> element.      <br/>
      You can also embed Flash-Videos directly on the Blog index (just like pictures):
    </p>
    <pre>...
&lt;div class="post-box"&gt;
  &lt;iframe class="rounded" 
      src="http://player.vimeo.com/video/10988919?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"
      width="610" height="343" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;p class="post-data"&gt;
    &lt;span class="date"&gt;December 21, 2010&lt;/span&gt;
    &lt;span class="categories"&gt;&lt;a href="#"&gt;News&lt;/a&gt;, &lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/span&gt;
    &lt;span class="comments"&gt;&lt;a href="post.php#comments"&gt;9 Comments&lt;/a&gt;&lt;/span&gt;
  &lt;/p&gt;
&lt;/div&gt;
...</pre>
		
		
		
		
		
		
		
		
		
		
		<h3 id="moreCodeExamples"><strong>H) More Code Examples</strong> - <a href="#toc">top</a></h3>
    <p>
      In this documentation I showed you how to implement the most important features.      <br/>
      You will find more code examples in the HTML files. Just look how they are done there and do it the same way or just copy the code and paste your own content in. It‘s really simple.
    </p>
		
		
		
		
		
		
		
		
		
		
		<h3 id="photoshop"><strong>I) Photoshop Files</strong> - <a href="#toc">top</a></h3>
		<p>
		  Among with the template come all PSD files needed to edit the different layout styles and colors.
		  With these files you can even create your own unique layout style. 		</p>
		
		
		
		
		
		
		
		
		
		
		<h3 id="support"><strong>J) Support</strong> - <a href="#toc">top</a></h3>
		<p>
		  If you have any further questions, please use the comment section of this item at <a href="http://www.mojo-themes.com/">mojo-themes.com</a>. This way other useres can benefit from the solution as well. I will try my best to answer every question.		</p>
		
		
		
		
		
		
		
		
		
		
		<h3 id="sources"><strong>K) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<p>
  		The template is using the following external scripts and resources:
		</p>
		<ul>
		  <li><a href="http://nivo.dev7studios.com/">Nivo Slider</a> jQuery plugin (for the sliders)</li>
		  <li><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">prettyPhoto</a> jQuery plugin (as Lightbox)</li>
		  <li><a href="http://fancybox.net/">Facybox</a> jQuery plugin (as prettyPhoto alternative)</li>
		  <li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Superfish</a> jQuery plugin (to enhance Dropdown Menus)</li>
		  <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Validation</a> jQuery plugin (to validate forms on the fly)</li>
		  <li><a href="http://www.malsup.com/jquery/form/">Form</a> jQuery plugin (to submit forms via AJAX)</li>
		  <li><a href="http://github.com/sorccu/cufon/wiki">Cufon</a> (to replace fonts)</li>
		  <li><a href="http://www.komodomedia.com/download/#social-network-icon-pack">Social Bookmark Icons</a> (for the Bottom Bar)</li>
		  <li><a href="http://www.fontsquirrel.com/fonts/Quicksand">Quicksand Font</a> (for the headings)</li>
		  <li><a href="http://www.fontsquirrel.com/fonts/PT-Sans">PT Sans Font</a> (for the slogan in the Top Bar)</li>
		</ul>
		
		<br/>
		<hr/>
		<br/>
		<p>
		  Again, thank you very much purchasing this template! I wish you all the best for the website that will grow out of it. If you want, you can post the URL of your final website in the comment section. I would really like to see how this template takes its place in the world wide web :)
		</p>
		<p>
		  Best regards,
		  <br/>
		  <span class="alt large">Ruven Pelka</span>
		</p>
		<br/>
		<hr/>
		<br/>
		
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
		
		
		
		
		
	</div><!-- end div .container -->
</body>
</html>